import styled from 'styled-components'
import Icon from '@/components/Icon'
/*
import img from '@img/all.png'
const Icon = styled.span`
	display: inline-block;
	background-image: url(${img});
	background-repeat: no-repeat;
	cursor: pointer;
`
*/
export interface IconAvatarProps {
	hasAvatar: boolean
	isMeeting: boolean
	isRoom: boolean
	isOnline: boolean
	size?: number
}

export const IconAvatar = styled(Icon).attrs(({ hasAvatar, isMeeting, isRoom, isOnline }: IconAvatarProps) => {
	/*
	根据不同的情况，添加不同的class
	*/
	if (hasAvatar) {
		return { className: `no-use` }
	} else {
		return {
			className: `${isMeeting ? `avatar-type-meeting` : ''} ${isRoom ? `avatar-type-room` : ''} ${
				isOnline ? '' : 'offline'
			}`,
		}
	}
})<IconAvatarProps>`
	width: ${({ size = 32 }) => size}px;
	height: ${({ size = 32 }) => size}px;
	background-position: ${({ size = 32 }) => (size === 32 ? `-1px -486px` : `0px -75px`)};
	&.no-use,
	&.no-use.offline {
		background-position: 0 20px;
	}
	&.avatar-type-room {
		background-position: ${({ size = 32 }) => (size === 32 ? `-69px -486px` : `-48px -75px`)};
	}
	&.avatar-type-meeting {
		background-position: ${({ size = 32 }) => (size === 32 ? `-545px -486px` : `-384px -75px`)};
	}
	&.offline {
		background-position: ${({ size = 32 }) => (size === 32 ? `-35px -486px` : `-48px -1319px`)};
	}
	img {
		border-radius: 50%;
		width: ${({ size = 32 }) => size}px;
		height: ${({ size = 32 }) => size}px;
	}
`
/*
使用的时候：
<StyledWrap
	hasAvatar={!!portrait}
	isMeeting={accountType === 10}
	isRoom={accountType === 2}
	size={size}
	isOnline={isOnline}
>
	.....
</StyledWrap>

export interface IconAvatarProps {
	hasAvatar: boolean
	isMeeting: boolean
	isRoom: boolean
	isOnline: boolean
	size?: number
}

style中拿到参数
width: ${({ size = 32 }) => size}px;

IconAvatar 是一个上方定义的组件

*/
export const StyledWrap = styled(IconAvatar)<IconAvatarProps>`
	img {
		border-radius: 50%;
		width: ${({ size = 32 }) => size}px;
		height: ${({ size = 32 }) => size}px;
	}
`

/*
这段代码使用了styled-components库来创建一些可复用且动态的React组件样式。
styled-components是一个流行的用于构建可重用React组件的CSS-in-JS解决方案。

下面是对代码的逐行解释：

首先，代码导入了styled函数和Icon组件。styled函数用于创建带样式的React组件，而Icon组件可能是一个通用的图标组件。

定义了一个接口IconAvatarProps，这个接口描述了IconAvatar组件的属性，
包括hasAvatar（是否有头像）、isMeeting（是否是会议）、isRoom（是否是房间）、isOnline（是否在线）和一个可选的size属性。

IconAvatar组件是通过styled(Icon)创建的，这意味着它将Icon组件包装在一个有样式的组件中。
attrs方法用于动态地向组件添加属性，这些属性基于传入的属性来决定。
例如，如果没有头像(hasAvatar为false)，就会添加className属性为avatar-type-meeting、avatar-type-room或offline。

IconAvatar组件的样式定义了宽度、高度和背景位置，这些值根据size属性动态变化。
还定义了不同状态下的背景位置，如.no-use、.avatar-type-room、.avatar-type-meeting和.offline。

StyledWrap组件是IconAvatar的一个包装，它同样使用styled来创建。它为img元素定义了样式，包括边框半径、宽度和高度，这些值也是根据size属性动态变化的。

最后，注释中展示了如何在React组件中使用StyledWrap组件，传递了hasAvatar、isMeeting、isRoom、size和isOnline等属性。

这段代码的主要目的是创建一个可以根据传入的属性动态改变样式的头像组件。例如，如果用户在线并且正在会议中，头像的背景位置会相应地改变以反映这些状态。

要理解这段代码，你需要熟悉React和styled-components的基本概念，包括组件、属性（props）、接口（interfaces）和动态样式生成。
*/
